<template>
  <div style="width:100vw;height:100vh;" class="intro-info">
    <!-- 头部 -->
    <!-- <div class="intro-info-header">
      <mt-header fixed title="我要竞聘">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <div class="intro-info-body">
      <div class="bscroll" ref="bscroll">
        <div style="padding-bottom:80px;" class="bscroll-container">
          <div class="form-body">
            <div style="background-color: #ffffff;">
              <form style="position:relative;" class="form-box" action>
                <div class="input-item flex-row">
                  <label for="name">
                    <span class="add-course-icon iconfont iconxingming"></span>
                    姓名
                  </label>
                  <input v-model="list.name" placeholder="请输入姓名" name="name" type="text" />
                </div>
                <div class="input-item flex-row">
                  <label for="phone">
                    <span class="add-course-icon iconfont iconwenti-shuben"></span>
                    电话
                  </label>
                  <input v-model="list.phone" placeholder="请输入电话" name="phone" type="number" />
                </div>
                <div class="input-item flex-row">
                  <label for="edu">
                    <span class="add-course-icon iconfont iconshuoming"></span>学历
                  </label>
                  <input
                    v-model="list.edu"
                    @click="courseTypes"
                    :placeholder="education!=''?education:'暂无'"
                    readonly
                    name="edu"
                    type="text"
                  />
                </div>
                <div class="input-item flex-row">
                  <label for="year">
                    <span class="add-course-icon iconfont iconloudou"></span>工作年限
                  </label>
                  <input
                    @click="yearTypes"
                    v-model="list.jobTime"
                    :placeholder="workyear!=''?workyear:'没有相关信息'"
                    readonly
                    name="year"
                    type="text"
                  />
                </div>
                <div class="input-item flex-row">
                  <label for="gangwei">
                    <span class="add-course-icon iconfont iconmendiangangwei_huaban"></span>引荐岗位
                  </label>
                  <input
                    placeholder="请输入引荐岗位"
                    disabled
                    v-model="list.recruitmentName"
                    name="gangwei"
                    type="text"
                  />
                </div>
                <div class="input-item flex-row">
                  <label for="date">
                    <span class="add-course-icon iconfont icondengdai"></span>引荐时间
                  </label>
                  <input
                    @click="handleCommentFocus"
                    disabled
                    v-model="list.time"
                    readonly
                    placeholder="请选择日期"
                    name="date"
                    type="text"
                  />
                </div>
                <div class="input-item flex-row">
                  <label for="date">
                    <span class="add-course-icon iconfont iconmingpian1"></span>添加简历
                  </label>
                  <!-- <input @click="handleCommentFocus" disabled v-model="list.time" readonly placeholder="请选择日期"
                  name="date" type="text">-->
                  <van-uploader class :after-read="afterRead">
                    <van-button
                      :disabled="flag"
                      type="info"
                      class="add"
                      size="small"
                      style="float:right"
                    >{{jianli}}</van-button>
                  </van-uploader>
                  <div v-show="fileName!=''" class="fileStyle">{{'文件:'+fileName}}</div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div style="position:fixed;bottom:15px;width:100%;" class="sub-box">
        <van-button :loading="loading" type="info" size="large" @click="send">发送到人力部门邮箱</van-button>
      </div>
    </div>
    <mt-datetime-picker
      @confirm="handleConfirm"
      ref="pickerDate"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
    ></mt-datetime-picker>

    <mt-popup v-model="courseTypePicker" position="bottom">
      <div class="init-btn flex-row">
        <div @click="pickerBtn(0)" class="close">取消</div>
        <div @click="pickerBtn(1)" class="confirm">确认</div>
      </div>
      <mt-picker valueKey="name" :slots="courseTypeSlots" @change="courseTypeChange"></mt-picker>
    </mt-popup>

    <mt-popup v-model="yearTypePicker" position="bottom">
      <div class="init-btn flex-row">
        <div @click="pickerBtn1(0)" class="close">取消</div>
        <div @click="pickerBtn1(1)" class="confirm">确认</div>
      </div>
      <mt-picker valueKey="name" :slots="yearTypeSlots" @change="yearTypeChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { Button } from "vant";
import BScroll from "better-scroll";
import DdValidate from "../../untils/validate";
import { Indicator, Toast } from "mint-ui";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
const nature = require("../../untils/antiShaking");
export default {
  data() {
    return {
      fileName: "",
      education: "请选择学历",
      workyear: "请输入工作年限",
      file: "", //文件的
      jianli: "添加简历",
      loading: false,
      flag: false,
      list: {
        name: "",
        phone: "",
        edu: "",
        jobTime: ""
      },
      name: "",
      phone: "",
      edu: "",
      xueli: "",
      year: "",
      gangwei: "",
      date: "",
      time: "",
      courseNameChecked: "",
      yearNameChecked: "",
      courseTypePicker: false,
      yearTypePicker: false,
      courseTypeSlots: [
        {
          values: [
            {
              name: "专科",
              edu: 0
            },
            {
              name: "本科",
              edu: 1
            },
            {
              name: "硕士",
              edu: 2
            },
            {
              name: "博士",
              edu: 3
            },
            {
              name: "其他",
              edu: 4
            }
          ],
          flex: 1
        }
      ],
      yearTypeSlots: [
        {
          values: [
            {
              name: "1-2",
              jobTime: 1 - 2
            },
            {
              name: "3-5",
              jobTime: 3 - 5
            },
            {
              name: "6-8",
              jobTime: 6 - 8
            }
          ],
          flex: 1
        }
      ]
    };
  },
  components: {
    "van-button": Button
  },
  methods: {
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        console.log(bscrollDom);
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    },
    handleConfirm(e) {
      this.list.time = easydate(e).format("yyyy-MM-dd");
      // console.log(this.list.time)
    },
    handleCommentEdu() {
      this.$refs.pickerDate.open();
    },
    handleCommentFocus() {
      this.$refs.pickerDate.open();
    },
    courseTypes() {
      this.courseTypePicker = true;
    },
    yearTypes() {
      this.yearTypePicker = true;
    },
    courseTypeChange(picker, value) {
      console.log(value);
      this.courseNameChecked = value[0].name;
      this.edu = value[0].edu;
      // this.list.edu = this.edu
    },
    yearTypeChange(picker, value) {
      this.yearNameChecked = value[0].name;
      this.jobTime = value[0].jobTime;
    },
    pickerBtn(num) {
      //学历
      if (num == 1) {
        this.list.edu = this.courseNameChecked;
      }
      this.courseTypePicker = false;
    },
    pickerBtn1(num) {
      //工作年限
      if (num == 1) {
        this.list.jobTime = this.yearNameChecked;
      }
      this.yearTypePicker = false;
    },
    // 人才引荐信息回显  内部引荐
    async qryUserInfoByRecruitmentId() {
      this.list.recruitmentName = this.$route.query.name;
      //获取当前时间
      var today = new Date();
      today.setTime(today.getTime());
      this.list.time =
        today.getFullYear() +
        "-" +
        (today.getMonth() + 1) +
        "-" +
        today.getDate();

      const { data: res } = await this.$http.get(
        "/recruitment/qryUserInfoByRecruitmentId",
        { params: { recruitmentId: this.$route.query.id } }
      );
      if (res.data.edu == 0) {
        res.data.edu = "大专";
      } else if (res.data.edu == 1) {
        res.data.edu = "本科";
      } else if (res.data.edu == 2) {
        res.data.edu = "硕士";
      }else if (res.data.edu == 3) {
        res.data.edu = "博士";
      } else  {
        res.data.edu = "其他";
      }
      res.data.jobTime = this.$route.query.jobTime;

      // this.list = res.data
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.fileName = file.file.name;
      this.file = file.file;
      this.jianli = "已添加";
      this.flag = true;
    },
    //发送
    async send() {
      if (this.list.name == "") {
        Toast({
          message: "请输入姓名"
        });
      } else if (this.list.phone == "") {
        Toast({
          message: "请输入电话"
        });
      } else if (this.list.edu == "") {
        Toast({
          message: "请输入学历"
        });
      } else if (this.list.jobTime == "") {
        Toast({
          message: "请输入工作年限"
        });
      } else {
        this.list.recruitmentId = this.$route.query.id;
        if (!this.flag) {
          Toast({
            message: "请先添加简历"
          });
        } else {
          this.loading = true;
          let formdata = new FormData();
          console.log(this.list);
          this.list.edu = this.edu;
          for (var key in this.list) {
            if (key != "time") {
              formdata.append(key, this.list[key]);
            }
          }
          formdata.append("multipartFile", this.file);
          let config = {
            header: {
              "Content-Type": "mutipart/form-data"
            }
          };
          console.log(9999, formdata);
          const { data: res } = await this.$http.post(
            "/recruitment/addIntroduceJob",
            formdata,
            config
          );
          if (res.success) {
            this.loading = false;
            Toast({
              message: res.data,
              duration: 2000
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          } else {
            this.loading = false;
            this.jianli = "重新上传";
            // setTimeout(() => {
            //   this.$router.go(-1);
            // }, 2000);
          }
        }
      }
    }
  },
  created() {
    this.qryUserInfoByRecruitmentId();
  },
  mounted() {
    const rules = {
      name: {
        required: true
      },
      phone: {
        required: true
      },
      edu: {
        required: true
      },
      year: {
        required: true
      },
      gangwei: {
        required: true
      },
      date: {
        required: true
      }
    };
    const messages = {
      name: {
        required: "请填写姓名"
      },
      phone: {
        required: "请填写电话"
      },
      edu: {
        required: "请选择学历"
      },
      year: {
        required: "请选择工作年限"
      },
      gangwei: {
        required: "请填写岗位"
      },
      date: {
        required: "请选择日期"
      }
    };
    setText("一键引荐");
    // better-scroll初始化
    this.initScroll('bscroll')
  }
};
</script>


<style lang="less" scoped>
textarea:disabled,
input:disabled {
  background-color: #fff;
}
.fileStyle {
  position: absolute;
  bottom: 5px;
  right: 15px;
  font-size: 0.28rem;
  color: #4787e4ff;
}
.van-uploader {
  float: right;
  margin-right: 2px;
  margin-bottom: 5px;
}
.add-course-icon {
  position: relative;
  top: 2px;
  margin-right: 10px;
  font-size: 40/75rem;
  color: #4787e4;
}
</style>
<style lang="less">
@import url("~@/pagecss/addClass.less");
.sub-box {
  // margin-top: 5/75rem;
  height: 1.733333rem;
  background: rgba(255, 255, 255, 1);
  padding: 0.306667rem 0.4rem;
}

// @import url("~@/pagecss/introduce-info.less");
</style>